<template>
	<view>
		<!--  -->
		<view class="margin">
			<view style="display: flex;justify-items: center;align-items: center;padding: 30rpx 0 ;">
				<view class="left-line  mr10"></view>
				<h4 class="size_17">名家视频课程</h4>
			</view>
			<!-- 选项 -->
			<u-tabs :list="list1" keyName="videoClassifyName" @click="click"></u-tabs>
			<!-- <br> -->
			<view class=""> </view>
			<!-- 框 -->
			<view class="content">
				<view class="col" v-for="(item, index) in list" :key="index" @click="play(item.videoId, index)">
					<video v-if="currentId == item.videoId" style="width: 690rpx; height: 390rpx; display: block"
						autoplay="true" :id="'video' + item.videoId" :src="item.videoPath"></video>
					<block v-else>
						<image src="http://storage.dezhoucloud.com/img/img.jpg" style="height: 390rpx; width: 690rpx; display: block"></image>
						<view class="block">
							<view class="sanjia"></view>
						</view>
					</block>
					<view class="name text-center">
						{{ item.videoName }}
					</view>
				</view>
			</view>
			<u-empty mode="data" v-if="list.length == 0">
			</u-empty>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						name: "关注",
					},
					{
						name: "推荐",
					},
					{
						name: "电影",
					},
					{
						name: "科技",
					},
					{
						name: "音乐",
					},
					{
						name: "美食",
					},
					{
						name: "文化",
					},
					{
						name: "财经",
					},
					{
						name: "手工",
					},
				],
				/* 课程 */
				list: [],
				img: "http://img.kaiyanapp.com/945fa937f0955b31224314a4eeef59b8.jpeg?imageMogr2/quality/100",
				currentId: 0,
				scrollH: 0,
				scrollTop: 0,
				height: 0,
				windowHeight: 0,
			};
		},
		onLoad() {
			let that = this;
			this.getList();
			// 获取可视区域高度
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				},
			});
		},
		onShow() {
			this.getVideo();
			this.getCateVideo();
		},
		onHide() {
			this.currentId = 0;
		},
		methods: {
			/* 分类视频 */
			async getCateVideo() {
				console.log("video");
				// let re = await this.$API.courseApi.getPageVideo(null, 3)
				// console.log(re, "re");
				/* ?classifyId=${null}&countVideo=${3} */
				this.request({
					url: `/videoClassify/selectList`,
				}).then((res) => {
					this.list1 = res.rows;
				});
			},
			/* 获取视频 */
			async getVideo() {
				console.log("video");
				// let re = await this.$API.courseApi.getPageVideo(null, 3)
				// console.log(re, "re");
				/* ?classifyId=${null}&countVideo=${3} */
				this.request({
					url: `/video/selectVideo`,
				}).then((res) => {
					this.list = res.data;
				});
			},
			/* 点击 */
			click(item) {
				console.log("item", item);
				let id = item.videoClassifyId;
				this.request({
					url: `/video/selectVideo?classifyId=${id}&countVideo=${3}`,
				}).then((res) => {
					this.list = res.data;
				});
			},
			play(id, i) {
				this.currentId = id;
				// 获取当前播放视频 元素距离顶部的高度
				if (this.height == 0) {
					uni
						.createSelectorQuery()
						.select(".col")
						.boundingClientRect((res) => {
							this.height = res.height;
							this.scrollTop = res.height * (i + 0.5);
						})
						.exec();
				} else {
					this.scrollTop = this.height * (i + 0.5);
				}
			},
			// getVideo

			getList() {
				this.list = [{
						name: "你相信有灵魂伴侣吗",
						img: "http://img.kaiyanapp.com/945fa937f0955b31224314a4eeef59b8.jpeg?imageMogr2/quality/100",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=5544&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "1",
					},
					{
						name: "2020 奥斯卡提名动画短片：「勿忘我」",
						img: "http://img.kaiyanapp.com/4bb009bdb0518331f05195e1c3b8dd2d.jpeg?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=184884&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "2",
					},
					{
						name: "2020 奥斯卡最佳动画短片提名：「女儿」",
						img: "http://img.kaiyanapp.com/e573ac166b01c8e33f1756f542004e8e.png?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=186094&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "3",
					},
					{
						name: "获奖搞笑恐怖动画短片：「死神来了蜗牛版」",
						img: "http://img.kaiyanapp.com/52ef4e573ed5d4189413ebeeab9ae7f2.png?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=189046&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "4",
					},
					{
						name: "科比 NBA 职业生涯的 40 个好球！",
						img: "http://img.kaiyanapp.com/ad8bd426e87829e0ba1f480f003da216.jpeg?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=185895&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "5",
					},
					{
						name: "高燃女性群像混剪：The Lady「平权之声」",
						img: "http://img.kaiyanapp.com/ccbc65d60ad0af98b8b40dd8842068d8.png?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=190478&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "6",
					},
					{
						name: "战斗女神踩点混剪：性感女神，在线揍人",
						img: "http://img.kaiyanapp.com/51ed6d181e19d635ff56528762f4f6b6.jpeg?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=182072&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "7",
					},
					{
						name: "换个角度看印度，友好包容的文明古国",
						img: "http://img.kaiyanapp.com/940ccd4fc7f78b17aeea1d1544b1c7bb.jpeg?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=173634&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "8",
					},
					{
						name: "泰国温馨广告：祝你生日快乐",
						img: "http://img.kaiyanapp.com/fd70a1e670f6c9cc0a272495a257d4c3.png?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=187719&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "9",
					},
					{
						name: "卡妹最新 SNL 现场首演强势新单「Easy」",
						img: "http://img.kaiyanapp.com/c51d878668c73578be66b87ea1119ac1.jpeg?imageMogr2/quality/60/format/jpg",
						video: "https://baobab.kaiyanapp.com/api/v1/playUrl?vid=175743&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss&ptl=true",
						videoId: "10",
					},
				];
			},
		},
	};
</script>

<style>
	page {
		background: #f5f6f7;

	}
</style>

<style lang="scss" scoped>
	::v-deep .u-row {
		align-items: flex-start !important;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.content {
		padding: 30rpx;
	}

	.name {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 0 0 10px 10px;
		background-color: #ffffff;
		// text-align: center;
		text-indent: 25rpx;
		font-size: 14px;
	}

	.col {
		overflow: hidden;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;

		.block {
			position: absolute;
			width: 100%;
			height: 390rpx;
			background-color: rgba($color: #000000, $alpha: 0.3);
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.sanjia {
				width: 0;
				height: 0;
				border-top: 12px solid transparent;
				border-left: 17px solid #ffffff;
				border-bottom: 12px solid transparent;
			}
		}
	}
</style>